/**
 * 主题切换组件
 * created by xq on 2018/10/16
 */
import React from 'react'
import PropTypes from 'prop-types'
import { connect } from './react-redux'
class ThemeSwitch extends React.Component {
  static propTypes = {
    themeColor: PropTypes.string
  }
  ChangeThemeColor(color) {
    if (this.props.onSwitchColor) {
      this.props.onSwitchColor(color)
    }
  }
  render() {
    return (
      <div>
        <button 
          style={{ color: this.props.themeColor }}
          onClick={this.ChangeThemeColor.bind(this, 'red')}>red</button>
        <button 
          style={{ color: this.props.themeColor }}
          onClick={this.ChangeThemeColor.bind(this, 'blue')}>blue</button>
      </div>
    )
  }
}
const mapStateToProps = state => {
  return {
    themeColor: state.themeColor
  }
}
const mapDispatchToProps = dispatch => {
  return {
    onSwitchColor: color => {
      dispatch({
        type: 'CHANGE_COLOR',
        themeColor: color
      })
    }
  }
}
export default connect(mapStateToProps, mapDispatchToProps)(ThemeSwitch)